<template>
    <p>count:{{ this.$store.state.count }}</p>
    <p>count:{{ count }}</p>
    <p>countAlias:{{ countAlias }}</p>
    <p>Getters ======</p>
    <p>countAddFive:{{ this.$store.getters.countAddFive }}</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
    <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>
    <p>Mutations =======</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayloadMut">addPlayloadMut</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>
    <button @click="addAlias">addAlias</button>
    <p>Actions ======</p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddActionMut</button>
    <button @click="asyncAddplayloadActionMut">"asyncAddplayloadActionMut"</button>
    <button @click="addAction">"addAction"</button>
    <button @click="addActionDispatch">"addActionDispatch"</button>
    <button @click="addActionAlias">addActionAlias</button>

    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleA-actions</button>


    <h1>Mapxxx方法</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>countA:{{ countA }}</p>


    <p>getters</p>
    <p>countAA:{{ countAA }}</p>

    <p>getters</p>
    <p>countBB:{{ countBB }}</p>



    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>


    <p>有命名空间</p>
    <p>访问 模块B中的state数据: {{ $store.state.a.countB }}</p>
    <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>



</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
export default {
    computed: {
        // count(){
        //     return this.$store.state.count
        // }
        // ...mapState(['count']),
        // // 对象形式
        ...mapState({
            count: state => state.count,
            count:'count',
            countAlias: state => state.count,
        }),

        // countAddFive(){
        //     return this.$store.getters.countAddFive
        // },
        // countAddFiveAddTen(){
        //     return this.$store.getters.countAddFiveAddTen
        // },
        // 数组形式
        // ...mapGetters(['countAddFive','countAddFiveAddTen'])
        ...mapGetters({
            countAddFive: 'countAddFive',
            countAddFiveAddTen: 'countAddFiveAddTen',
            countAddFiveAlias: 'countAddFive',
        }),
        //state module
        ...mapState({
            countA: state => state.a.countA
        }),

         //state 模块b
         ...mapState ('b',['countBB']),

        //getters 全局
        ...mapGetters(['countAA']),

        //getters 模块b
        ...mapGetters(['b.countBB'])
        
    },
    methods: {
        addMut() {
            this.$store.commit('add')
        },
        addPlayloadMut() {
            this.$store.commit('addPlayload',{num:10})
            // this.$store.commit({
            //     type: 'addPlayload',
            //     num: 10
            // })
        },
        ...mapMutations(['add','addPlayload']),
        addCommit() {
            this.addPlayload({ num: 20 })
        },
        ...mapMutations({
            add: 'add',
            addAlias: 'addAlias'
        }),
        addActionMut(){
            this.$store.dispatch('addAction')
        },
        addPlayload(state, Playload) {
            state.count += Playload.num
        },
        asyncAddActionMut(){
            this.$store.dispatch('asyncAddAction')
        },
        asyncAddplayloadActionMut(){
            this.$store.dispatch('asyncAddployloadAction',{num:20})
        },
        // ...mapActions(['addAction','asyncAddployAction']),
        addActionDispatch(){
this.asyncAddplayloadAction({num:30})
        },
        addActionDispatch(){
            this.asyncAddployloadAction({num:30})
        },
        ...mapActions({
            addAction:'addAction',
            addActionAlias: 'addAction'
        }),
        commitIncreaseA() {
            this.$store.commit('increaseA')
        },
        commitAsyncIncreaseA() {
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB() {
            this.$store.commit('increaseB')
        },
        commitAsyncIncreaseB() {
            this.$store.dispatch('asyncIncreaseB')
        },
    },
    // mounted() {
    //     console.log(this.$store);
    // }
}
</script>